<template>
  <view style="width: 100vw">
    <Navbar :isSearch="true" @search="search"></Navbar>
    <Message :data="trendData" :type="1"></Message>
    <view class="u-m-20">
      <u-swiper :list="bannerList" border-radius="20" height="240" @click="goBannerUrl"></u-swiper>
    </view>

    <view class="u-flex u-row-between drop_box" :style="{ top: stickyTop + 'px' }">
      <!-- <u-dropdown height="68" menu-icon="arrow-down-fill" menu-icon-size="16" :active-color="'#B3723E'"
				:isBtn="isDropBtnActive" id="drop" ref="uDropdown" @menuBtnClick="menuBtnClick"
				@iconClick="iconClick">
				<u-dropdown-item :title="moreSelectList[dropIndex].checkName" v-for="(dropItem,dropIndex) in 2"
					:key="dropIndex">
					<view class="slot-content">
						<view class="rate_box">
							<view class="rate_title">{{moreSelectList[dropIndex].title}}</view>
							<view class="u-m-t-20">
								<u-row gutter="20">
									<u-col span="4" v-for="item in moreSelectList[dropIndex].list" :key="item.label">
										<view class="checkOptionBox u-m-b-20" :class="item.check ? 'checkStatus' : ''"
											@click="toRadioCheckData(item,moreSelectList[dropIndex])">
											{{item.label}}
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="推荐">
					<view class="slot-content">
					</view>
				</u-dropdown-item>
			</u-dropdown> -->

      <!-- <view class="u-flex">
				<view class="u-m-r-20 choose_box">选择日期 V</view>
				<view class="choose_box">选择区域 V</view>
			</view> -->
      <!-- <view class="choose_box">推荐酒局 ></view> -->
    </view>
    <u-tabs :list="typeData.list" :current="typeData.current" :height="72" :active-color="'#B3723E'"
      :bg-color="'transparent'" @change="handleTabChange" />
    <scroll-view scroll-y="true">
      <view class="u-m-20">
        <TeaList :list="teaList" :isDistance="true" @goAdvUrl="goAdvUrl" @goTeaDetail="goTeaDetail" @goSearch="goSearch">
        </TeaList>
      </view>
    </scroll-view>
    <Loadmore :status="status"></Loadmore>

    <SubmitBtn :text="'发起酒局'" @submit="submit" v-if="![0, '0'].includes(userStatus)"></SubmitBtn>

    <!-- 客户按钮 -->
    <DragButtom>
      <view class="custom_box">
        <button open-type="contact" class="custom_content">
          <u-icon name="server-fill" color="#fff" size="52"></u-icon>
        </button>
      </view>
    </DragButtom>

    <!-- 开屏广告 -->
    <u-mask :show="advData.show">
      <view class="u-flex u-flex-col u-row-center u-height-100 u-width-100">
        <view @click="goAssist">
          <u-image width="534rpx" height="100%" border-radius="20rpx" :src="advData.image" mode="widthFix"></u-image>
        </view>
        <view class="u-m-t-40" @click="handleCloseAdv">
          <u-icon size="50" class="u-p-r-8" color="#fff" name="close-circle" />
        </view>
      </view>
    </u-mask>

    <!-- 时间选择 -->
    <u-calendar v-model="calendar.show" :mode="calendar.mode" :min-date="startDate" :max-date="endDate"
      active-bg-color="#fb6316" range-bg-color="#F615" range-color="#fff" btn-type="warning" :z-index="99999"
      @change="calendarChange"></u-calendar>

    <!-- 多选弹出框 -->
    <u-popup v-model="selectPopupShow" length="90%" mode="bottom" border-radius="20">
      <view style="height: 100%;">
        <scroll-view scroll-y="true" class="slot-scroll" style="height: 85%;">
          <view v-for="selectItem in moreSelectList" :key="selectItem.title" class="borderLine moreOptionBox">
            <view class="moreOptionTitle">{{ selectItem.title }}</view>
            <view class="u-m-t-20">
              <u-row gutter="20">
                <u-col span="4" v-for="childItem in selectItem.list" :key="childItem.label">
                  <view class="checkOptionBox u-m-b-20" :class="childItem.check ? 'checkStatus' : ''"
                    @click="toCheckData(childItem, selectItem)">
                    {{ childItem.label }}
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
        </scroll-view>
        <view style="height: 80rpx;"></view>

        <view class="u-flex u-m-l-32 u-p-b-40 u-m-r-32 u-row-between">
          <button class="reserve" @click="toReserve">重置</button>
          <button class="confirm" @click="toConfirm">确定</button>
        </view>
      </view>
    </u-popup>

    <!-- 确认弹出框 -->
    <Modal :show="modal.show" :confirmText="modal.confirmText" :cancelText="modal.cancelText"
      :modalContent="modal.content" :showCancel="modal.showCancel" :showConfirm="modal.showConfirm"
      @cancel="modal.show = false" @confirm="modalConfirm"></Modal>

    <!-- 关注公众号 -->
    <NoticePopup :show="isFollowAccount" :type="noticeType" @goPerfect="goPerfect"
      @onCloseNotice="isFollowAccount = false">
    </NoticePopup>

    <Tabbar></Tabbar>
  </view>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Tabbar from '@/components/Tabbar.vue'
import TeaList from '@/components/TeaList.vue'
import Loadmore from '@/components/Loadmore.vue'
import SubmitBtn from '@/components/SubmitBtn.vue'
import Modal from '@/components/Modal.vue'
import Message from '@/components/Message.vue'
import DragButtom from '@/components/DragButton.vue'
import NoticePopup from '@/components/NoticePopup.vue'
import share from '@/mixins/share.js'
import reachBottom from '@/mixins/reachBottom.js'
import {
  userInfo,
  getShare,
  getIndexBanner,
  advDisplay,
  bindUserId,
  userLogin,
  advertList,
  advertView,
  userHonorList
} from '@/network/api.js'
import {
  teaList,
  teaThemeList,
  teaNumber,
  teaJoinNum
} from '@/network/tea.js'
import {
  teaSelectList,
  dateRange,
  formatDate,
  presidentClass,
  formatDistance,
  InitScene,
  getDayOfWeek,
  userSetting,
  setUserStorageSync,
  pointTransform
} from '@/utils/index.js'
export default {
  mixins: [share, reachBottom],
  components: {
    Navbar,
    Tabbar,
    TeaList,
    Loadmore,
    SubmitBtn,
    Modal,
    Message,
    DragButtom,
    NoticePopup
  },
  data() {
    return {
      timeOut: null,
      bannerList: [],
      calendar: {
        show: false,
        mode: 'date'
      },
      typeData: {
        list: [], // 酒局类型
        current: 0,
        id: 0
      },
      moreSelectList: teaSelectList(),
      teaList: [],
      keyword: '',
      modal: {
        show: false,
        showCancel: true,
        showConfirm: true,
        confirmText: '申请',
        cancelText: '取消',
        content: ''
      },
      advData: {
        show: false,
        image: '',
        url: '',
        id: 0
      },
      trendData: {},
      stickyTop: 0,
      selectPopupShow: false,
      isDropBtnActive: false,
      isFollowAccount: false,
      longitude: 0,
      latitude: 0,
      advListObj: {},
      noticeType: 0,
      startDate: formatDate(Date.now() / 1000, true),
      endDate: formatDate((Date.now() + 2400 * 1000 * 24 * 9) / 1000, true),
      userStatus: uni.getStorageSync("user_status"), // 0 未注册  1 拉黑  2 已注册  3未激活
      presidentStatus: uni.getStorageSync(
        "president_status"), // 0 不是青创私董 1 青创私董审核 2 审核不通过 3 考核中 4 考核不通过 5 爱心青创私董 6 初级青创私董 7 高级青创私董 8 超级青创私董 
      isLoading: false
    }
  },
  async onLoad(options) {
    wx.hideShareMenu()
    // this.$refs.PrivacyPopck.checkPrivacySetting()
    await this.$onLaunched
    uni.showLoading({
      title: "加载中"
    })
    if (getApp().globalData.switchCustom == false) {
      if (options.scene) {
        const pages = getCurrentPages()
        const currentPage = pages[pages.length - 1]
        const params = {
          userid: uni.getStorageSync("user_id"),
          inviter: InitScene(options.scene).inviterId,
          url: currentPage.$page.fullPath || ''
        }
        await bindUserId(params)
      }
      const _this = this
      uni.getLocation({
        success: function (res) {
          _this.longitude = res.longitude
          _this.latitude = res.latitude
          _this.getTeaList()
        },
        fail: function (err) {
          _this.getTeaList()
        }
      })
    }
    this.getTeaThemeList()
    this.handleGetShare()
    this.handleGetBanner()
    this.handleGetStickyTop()

  },
  async onShow() {
    await this.$onLaunched
    this.handleGetUserInfo()
    this.handleGetTeaNumber()
    if (getApp().globalData.switchCustom) {
      this.page = 1
      this.teaList = []
      const _this = this
      uni.getLocation({
        success: function (res) {
          _this.longitude = res.longitude
          _this.latitude = res.latitude
          _this.getTeaList()
        }
      })
      getApp().globalData.switchCustom = false
    }
    this.handleGetAdvShow()
  },
  onPullDownRefresh() {
    this.reserveList()
    this.timeOut = setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  onHide() {
    clearTimeout(this.timeOut)
  },
  onShareAppMessage() {
    return {
      title: this.mixinsShare.title,
      desc: this.mixinsShare.des,
      path: this.mixinsShare.page,
      imageUrl: this.mixinsShare.image,
    }
  },
  methods: {
    handleGetShare() {
      getShare({
        key: 'home'
      }).then(res => {
        res.data.page = `${res.data.page}?inviterId=${uni.getStorageSync("user_id")}`
        this.mixinsShare = res.data
        setTimeout(() => {
          wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
          })
        }, 1000)
      })
    },
    handleCheckUser() {
      const userStauts = uni.getStorageSync("user_status")
      if (userStauts == 0) {
        uni.navigateTo({
          url: "/pages/register/register"
        })
      }
    },
    handleGetStickyTop() {
      const _this = this
      uni.getSystemInfo({
        success: (res) => {
          const statusBarHeight = res.statusBarHeight || 0;
          const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
          const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
            2;
          const topIconDistance = statusBarHeight + navBarHeight - 7;
          _this.stickyTop = topIconDistance
        }
      })
    },
    handleGetAdvShow() {
      advDisplay().then(res => {
        if (res.data.image && getApp().globalData.is_firstAdv) {
          this.advData.id = res.data.id
          this.advData.image = res.data.image
          this.advData.url = res.data.type == 0 ? res.data.url : res.data.page
          this.advData.type = res.data.type
          getApp().globalData.is_firstAdv = false
          this.advData.show = true
          const view = {
            type: 2,
            t_id: res.data.id,
            status: 0,
            user_id: uni.getStorageSync("user_id")
          }
          advertView(view)
        }
      })
    },
    handleTabChange(ind) {
      this.typeData.current = ind
      this.typeData.id = this.typeData.list[ind].id
      this.reserveList()
    },
    handleGetTeaNumber() {
      teaNumber({
        user_id: uni.getStorageSync("user_id")
      }).then(res => {
        this.trendData = res.data
      })
    },
    handleGetBanner() {
      getIndexBanner({
        type: 0
      }).then(res => {
        res.data.map(item => {
          const params = {
            image: item.img_wap,
            url: item.url
          }
          this.bannerList.push(params)
        })
      })
    },
    changeBadge(e) {
      this.swiperCurrentIndex = e.detail.current;
      this.title = e.detail.currentItemId;
      for (let key in this.animationData) {
        if (e.detail.currentItemId == key) {
          this.animation.scale(this.zoomParam).step();
          this.animationData[key] = this.animation.export();
        } else {
          this.animation.scale(1.0).step();
          this.animationData[key] = this.animation.export();
        }
      }
    },
    handleCloseAdv() {
      this.advData.show = false
      getApp().globalData.is_firstAdv = false
    },
    goBannerUrl(index) {
      let data = this.bannerList[index]
      if (data.url.includes("小程序")) {
        uni.navigateToMiniProgram({
          shortLink: data.url
        })
      } else {
        uni.navigateTo({
          url: `/${data.url}&isBack=true`
        })
      }
    },
    goAssist() {
      const view = {
        type: 2,
        t_id: this.advData.id,
        status: 1,
        user_id: uni.getStorageSync("user_id")
      }
      advertView(view)
      if (this.advData.type == 0) {
        uni.navigateTo({
          url: this.advData.url + '&isBack=true'
        })
      } else {
        uni.navigateToMiniProgram({
          shortLink: this.advData.url
        })
      }
      this.advData.show = false
    },

    handleGetUserInfo() {
      if (uni.getStorageSync("user_id")) {
        userInfo({
          user_id: uni.getStorageSync("user_id")
        }).then(res => {
          uni.setStorageSync("user_status", res.data.status)
          uni.setStorageSync("user_isBlack", res.data.is_black)
          uni.setStorageSync("president_status", res.data.president_status)
          this.presidentStatus = res.data.president_status
          this.userStatus = res.data.status
          if (res.data.is_subscribe == 0) {
            this.noticeType = 1
            this.isFollowAccount = true
          } else if (res.data.need_tip.is_need == 1) {
            this.noticeType = 4
            this.isFollowAccount = true
          }
          getApp().globalData.is_subscribe = parseInt(res.data.is_subscribe)
        })
      } else {
        uni.login({
          provider: "weixin",
          success(res) {
            userLogin({
              code: res.code
            }).then(res => {
              setUserStorageSync(res.data)
            })
          }
        })
      }
    },
    getTeaList() {
      const params = this.dealSelectData()
      teaList(params).then(res => {
        if (res.data.list.length > 0) {
          res.data.list.map(item => {
            switch (item.pay_type) {
              case 1:
                item.pay_name = '免费'
                break;
              case 2:
                item.pay_name = `${item.price}`
                break;
              case 3:
                item.pay_name = `${parseInt(item.price)}积分`
                break;
            }
            if (item.label) {
              item.label = item.label.split("#").filter(item => item !==
                null && item !== undefined && item)
            }
            item.user.number = pointTransform(item.user.number)
            item.user.president_class = presidentClass(item.user
              .president_status)
            item.distance = formatDistance(item.distance)
            let newTime = item.starting_time.slice(0, 0) + item.starting_time
              .slice(11)
            item.starting_time = getDayOfWeek(item.starting_time.slice(0,
              10)) + newTime
            /* item.address = item.address.substring(0, item.address.indexOf(
              "区") + 1) */
            this.teaList.push(item)
          })
        }
        if (res.data.list.length < 10) this.status = 'nomore'
        uni.hideLoading()
      })
    },
    async getTeaThemeList() {
      const res = await teaThemeList()
      res.data.unshift({
        name: '全部',
        id: 0
      })
      this.typeData.list = res.data
      this.typeData.id = res.data[0].id


      /* res.data.map(item => {
        const params = {
          label: item.name,
          value: item.id,
          check: false
        }
        this.moreSelectList.map(item => {
          if (item.title == "类型") {
            item.list.push(params)
          }
        })
      }) */
    },
    goAdvUrl(val) {
      const view = {
        type: 1,
        t_id: val.id,
        status: 1,
        user_id: uni.getStorageSync("user_id")
      }
      advertView(view)
      switch (val.type) {
        case 1:
          uni.navigateTo({
            url: "/teaBureau/teaPersonDetail/teaPersonDetail?id=" + val.user_id
          })
          break;
        case 3:
          uni.navigateToMiniProgram({
            shortLink: val.url
          })
        case 4:
          uni.navigateTo({
            url: "/pages/giftDetail/giftDetail?id=" + val.together_id
          })
          break;
      }
    },
    goTeaDetail(val) {
      if (uni.getStorageSync("user_isBlack") == 0) {
        uni.navigateTo({
          url: `/teaBureau/teaDetail/teaDetail?id=${val.id}`
        })
      } else {
        this.modal.content = '当前用户权限受限，请联系系统管理员'
        this.modal.confirmText = '确定'
        this.modal.show = true
      }
    },
    goSearch(val) {
      uni.navigateTo({
        url: "/teaBureau/teaSearch/teaSearch?label=" + val
      })
    },
    iconClick() {
      // this.selectPopupShow = true
      uni.navigateTo({
        url: "/teaBureau/teaList/teaList"
      })
    },
    submit() {
      this.modal.showConfirm = true
      this.modal.cancelText = '取消'
      userInfo({
        user_id: uni.getStorageSync("user_id")
      }).then(res => {
        uni.setStorageSync("user_status", res.data.status)
        uni.setStorageSync("president_status", res.data.president_status)
        uni.setStorageSync("user_isBlack", res.data.is_black)
        this.presidentStatus = Number(res.data.president_status)
        this.userStatus = Number(res.data.status)
        if (uni.getStorageSync("user_isBlack") == 0) {
          if (this.userStatus == 0) {
            this.modal.content = '部分功能需注册解锁，注册后即可体验完整服务'
            this.modal.confirmText = '前往注册'
            this.modal.show = true
          } else {
            switch (this.presidentStatus) {
              case 0:
                this.modal.content = '只有青创私董才有权限发起酒局，是否申请成为青创私董'
                this.modal.confirmText = '申请'
                this.modal.show = true
                break;
              case 1:
                this.modal.content = '青创私董审核中'
                this.modal.confirmText = '确定'
                this.modal.show = true
                break;
              case 2:
                this.modal.content = '审核不通过'
                this.modal.confirmText = '再次申请'
                this.modal.show = true
                break;
              case 3:
                this.modal.content = '考核中'
                this.modal.confirmText = '确定'
                this.modal.show = true
                break;
              case 4:
                this.modal.content = '考核不通过'
                this.modal.confirmText = '再次申请'
                this.modal.show = true
                break;
              case 5:
              case 6:
              case 7:
              case 8:
                uni.navigateTo({
                  url: "/teaBureau/teaPublish/teaPublish"
                })
                break;
            }
          }
        } else {
          this.modal.content = '当前用户权限受限，请联系系统管理员'
          this.modal.confirmText = '确定'
          this.modal.show = true
        }
      })
    },
    modalConfirm() {
      /* 提示框按钮 */
      this.modal.show = false
      if (uni.getStorageSync("user_isBlack") == 0) {
        if (this.userStatus == 0) {
          uni.navigateTo({
            url: "/pages/register/register"
          })
        } else {
          switch (this.presidentStatus) {
            case 0:
              uni.navigateTo({
                url: "/teaBureau/teaAgreement/teaAgreement"
              })
              break;
            case 2:
            case 4:
              uni.navigateTo({
                url: "/teaBureau/teaAgreement/teaAgreement"
              })
              break;
          }
        }
      }
    },
    calendarChange(val) {
      this.moreSelectList.map(item => {
        if (item.title == '时间') {
          item.startDate = val.result
          item.endDate = val.result
        }
      })
      this.reserveList()
      this.$refs.uDropdown.close()
    },
    menuBtnClick(val) {
      this.isDropBtnActive = !this.isDropBtnActive
      if (this.isDropBtnActive) {
        this.moreSelectList.map(item => {
          if (item.title == "青创私董等级") {
            item.checkName = item.list.find(dropItem => dropItem.value == "8").label
            item.checkValue = item.list.find(dropItem => dropItem.value == "8").value
            item.list.map(item2 => item2.check = false)
            item.list.find(dropItem => dropItem.value == "8").check = true
          }
        })
      } else {
        this.moreSelectList.map(item => {
          if (item.title == "青创私董等级") {
            item.checkName = ''
            item.checkValue = ''
            item.list.map(item2 => item2.check = false)
          }
        })
      }

      this.reserveList()
    },
    toRadioCheckData(item, data) {
      /* 下拉单选 */
      let _this = this
      if (data.title == "选择距离" && item.label == "地区选择" && item.value == 0) {
        uni.chooseLocation({
          success: function (res) {
            data.checkName = item.label
            data.latitude = res.latitude
            data.longitude = res.longitude
            _this.reserveList()
          }
        })
      }
      if (data.title == '选择日期' && item.value == 8) {
        this.calendar.show = true
        data.list.map(item => item.check = false)
        item.check = true
        data.checkName = item.label
        data.checkValue = item.value
        return
      }
      data.list.map(item => item.check = false)
      item.check = true
      data.checkName = item.label
      data.checkValue = item.value
      this.reserveList()
      this.$refs.uDropdown.close()
    },
    toCheckData(item, data) {
      /* 下拉筛选单选 */
      if (data.title == '时间' && item.value == 5) {
        this.calendar.show = true
      }
      if (data.title == '距离' && item.label == "地区选择" && item.value == 0) {
        uni.chooseLocation({
          success: function (res) {
            data.checkName = item.label
            data.latitude = res.latitude
            data.longitude = res.longitude
          }
        })
      }
      data.list.map(item => item.check = false)
      item.check = true
      data.checkName = item.label
      data.checkValue = item.value
    },
    dealSelectData() {
      /* 处理数据 */
      let params = {
        page: this.page,
        limit: this.pageSize,
        keyword: this.keyword,
        user_id: uni.getStorageSync("user_id"),
        theme_id: this.typeData.id,
        longitude: this.longitude,
        latitude: this.latitude
        // tea_status: 1
      }
      let _this = this
      // this.moreSelectList.map(item => {
      // 	switch (item.title) {
      // 		case "选择日期":
      // 			if (item.checkValue == 0) {
      // 				params.start_time = ''
      // 			} else if (item.checkValue == 8) {
      // 				params.start_time = `${item.startDate} 00:00:00至${item.endDate} 23:59:59`
      // 			} else {
      // 				params.start_time =
      // 					`${dateRange(0).start_time}至${dateRange(item.checkValue - 1).end_time}`
      // 			}
      // 			break;
      // 		case "选择距离":
      // 			if (item.checkName == "地区选择" && item.checkValue == 0) {
      // 				params.distance = ''
      // 				params.longitude = item.longitude
      // 				params.latitude = item.latitude
      // 			} else {
      // 				params.distance = item.checkValue
      // 				params.longitude = _this.longitude,
      // 					params.latitude = _this.latitude
      // 			}
      // 			break;
      // 	}
      // })
      return params
    },
    toDropClose() {
      this.reserveList()
    },
    toReserve() {
      /* 筛选充值 */
      this.moreSelectList.map(item => {
        if (["时间", "距离", "类型", "青创私董等级"].includes(item.title)) {
          item.checkName = item.list[0].label
          item.checkValue = item.list[0].value
          item.list.map(listItem => listItem.check = false)
          item.list[0].check = true
        } else {
          item.checkName = ''
          item.checkValue = ''
          item.list.map(otherItem => otherItem.check = false)
          item.list[0].check = true
        }
      })
      this.reserveList()
      // this.$refs.uDropdown.close()
      this.selectPopupShow = false
      this.$refs.uDropdown.contentHeight = 0
    },
    toConfirm() {
      /* 筛选确认 */
      this.reserveList()
      // this.$refs.uDropdown.close()
      this.$refs.uDropdown.contentHeight = 0
      this.selectPopupShow = false
    },
    async goPerfect() {
      const res = await userInfo({
        user_id: uni.getStorageSync("user_id")
      })
      if (res.data.company) {
        uni.navigateTo({
          url: "/pages/register/register?isEdit=1"
        })
      } else {
        uni.navigateTo({
          url: "/pages/register/register"
        })
      }
    },
    reserveList() {
      this.page = 1
      this.teaList.length = 0
      this.status = 'loading'
      this.getTeaList()
    },
    search(val) {
      this.keyword = val
      this.reserveList()
    },
    loadData() {
      if (this.status == 'nomore') return
      this.page++
      this.status = 'loading'
      this.getTeaList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-dropdown__menu {
  // background: #fff;
  // padding: 16rpx;
  border-radius: 20rpx;
}

::v-deep .u-dropdown__menu__item {
  flex: none !important;
  background: #fff;
  color: #B3723E;
  padding: 15rpx 25rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-right: 20rpx;
}

::v-deep .u-dropdown__menu__item__text {
  font-size: 24rpx !important;
  // color: #9EA2AE !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rate_box {
  padding: 30rpx 30rpx 20rpx 30rpx;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;

  .rate_title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.moreOptionBox {
  padding: 20rpx 0px;
  margin: 0 20rpx;

  .moreOptionTitle {
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;
  }
}

.checkOptionBox {
  background: #F7F7F7;
  color: #000;
  padding: 20rpx 0;
  text-align: center;
  font-size: 24rpx;
  border-radius: 10rpx;
}

.checkStatus {
  background: #B3723E;
  color: #fff;
}

.slot-content {
  background: #fff;
  height: 100%;
  border-bottom: 1px solid #f7f7f7;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;

  .slot-scroll {
    height: 800rpx;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  }
}

.reserve {
  width: 240rpx;
  margin-right: 40rpx;
  background: #eee;
  color: #000;
  font-size: 24rpx;
  padding: 8rpx 0;
}

button::after {
  border: none;
}

.confirm {
  flex: 1;
  background: #B3723E;
  color: #fff;
  font-size: 24rpx;
  padding: 8rpx 0;
}

.custom_box {
  padding: 6rpx;
  background: #FBE8DA;
  border-radius: 50rpx;
  z-index: 9999;

  .custom_content {
    padding: 10rpx;
    background: #B3723E;
    border-radius: 50rpx;
    line-height: initial;
    font-size: inherit;
  }
}

.choose_box {
  background: #fff;
  color: #B3723E;
  padding: 15rpx 25rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
</style>